<template>
  <div class="example">
    <div class="avatar">
      <i-avatar src="/static/lyric.jpg"
        i-class="i-avatar-custom">
      </i-avatar>
      <div class="nickname">lyric</div>
    </div>
    <van-collapse :value="activeNames" @change="onChange">
      <van-collapse-item title="有赞微商城" name="1">
        提供多样店铺模板，快速搭建网上商城
      </van-collapse-item>
      <van-collapse-item title="有赞零售" name="2">
        网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
      </van-collapse-item>
      <van-collapse-item title="有赞美业" name="3" disabled>
        线上拓客，随时预约，贴心顺手的开单收银
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
export default {
  name: 'example',
  data () {
    return {
      activeNames: ['1']
    }
  },
  methods: {
    onChange (event) {
      this.activeNames = event.mp.detail
    }
  }
}
</script>

<style lang="scss" scoped>
.example {
  padding: 8px;
  .avatar {
    margin: 75px 0 25px;
    text-align: center;
    .nickname {
      margin-top: 8px;
    }
  }
}
</style>
